<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1.过渡案例_原生实现</title>
    <style>
        .picture{
          width: 100px;  
          transition:  1s all linear;
        }
        .come{
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        .leave{
            opacity: 0;
            transform: scale(0.2) rotate(180deg);
        }
    </style>
</head>
<body>
    <button id="btn">切换</button><br>
    <img class="picture" src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt="">

    <script>
        const btn = document.getElementById('btn')
        const img = document.querySelector('.picture')
        let isShow = true
        
        btn.onclick = () => {
            if(isShow) img.className = 'picture leave';
            else img.className = 'picture come'
            isShow = !isShow
        }
    </script>
</body>
</html>